<template>
	<view class="goodsInfo">
		<uni-search-bar style="background-color: #fff;" @confirm="search" v-model="queryParam.NameorCode"
			@cancel="cancel">
		</uni-search-bar>
		<view class="container" style="display: flex;justify-content:flex-end">
			<view class="left" style="">
				<view :class="current==index?'leftItem active':'leftItem'" v-for="item,index in typeData" :key="item.Id"
					@click="changeType(index,item.Id)">
					{{item.Name?item.Name:''}}
				</view>
			</view>
			<view class="" style="width:72%;">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower">
					<uni-list v-if="typeData.length>0">
						<uni-list-item v-for="item in typeData[current].subData" :key="item.Id">
							<template v-slot:body>
								<view style="width: 100%;">
									<view class="" style="display: flex;padding-top: 20rpx;">
										<view style="" class="sideRightimage" @click="iInvRCostChange(item,index)">
											<image v-if="item.Picture" :src="item.Picture" alt="无法访问图片" />
											<image v-else src="/static/none.png" mode="" />
										</view>
										<view class=""
											style="display: flex;flex-direction: column;justify-content: space-around;width: 100%;">
											<view v-if="item.cInvName" class=""
												style="display: flex;flex-direction: column;margin-left: 15rpx;width: 100%;">
												<view class="sideRightTitle" style="">
													<text class="slot-box slot-text"
														style="font-size: 28rpx;">{{item.cInvName}}</text>
												</view>
											</view>
											<view class=""
												style="display: flex;flex-direction: column;margin-left: 15rpx;width: 100%;">
												<view v-if="item.cInvCode" class="sideRightTitle" style="">
													<text class="slot-box slot-text"
														style="font-size: 28rpx;">编号:{{item.cInvCode}}</text>
												</view>
											</view>

											<view class="" style="display: flex;margin-left: 15rpx;width: 100%;">
												<view v-if="item.cInvStd" class="sideRightTitle"
													style="margin-right: 15rpx;">
													<text class="slot-box slot-text"
														style="font-size: 28rpx;">规格:{{item.cInvStd}}</text>
												</view>
												<view v-if="item.GroupName" class="sideRightTitle"
													style="margin-left: 10rpx;">
													<text class="slot-box slot-text" style="font-size: 28rpx;">
														单位:{{item.GroupName}}</text>
												</view>
											</view>
										</view>
									</view>
									<!-- 右侧加减 display: flex;justify-content: space-between;margin-top: 20rpx;-->
									<view
										style="display: flex;justify-content: space-between;padding-right: 25rpx;margin: 25rpx 0;">
										<view style="display: flex;flex-direction: column;">
											<view style="color:red;display: flex;">
												<text
													style="font-size: 0.9rem;">￥</text>{{momenyFormat(item.iInvRCost)}}
											</view>
										</view>
										<view class="footerCheck">
											<!-- <uni-number-box :price="item.iInvRCost" v-model="Quantity" :min="0"
												@change="changeNum(item)" :disabled="item.iInvRCost==0" /> -->
											<view class="" style="display: flex;">
												<!--  :class="[item.deleteActive==false?'deleteActive':'']" -->
												<text @click="reduce(item)">–</text>
												<input :style="{ width: inputWid() }" maxlength="7" type="number"
													v-model="item.Quantity" @input="numberInput(item ,'输入')"
													@blur="numberBlur(item)">
												<!-- :class="[item.number>0?'addActive':'']"git -->
												<text @click="add(item, '添加')">+</text>
											</view>
										</view>
									</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
					<!-- <view class="" style="padding-bottom: 100rpx;">
						<uniLoadMore :status="status" :contentText="contentText" :rows="typeData[current].subData" :width="194">
						</uniLoadMore>
					</view> -->
				</scroll-view>
			</view>
			<!-- <view class="right">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower">
					<uni-list v-if="typeData.length>0">
						<uni-list-item v-for="item in typeData[current].subData" :key="item.Id" :title="item.cInvName"
							:note="'￥'+momenyFormat(item.iInvRCost)"
							:thumb="item.Picture?item.Picture:'/static/none.png'" thumb-size="lg">
							<template v-slot:footer>
								<view class="footerCheck">
									<uni-number-box v-model="item.Quantity" :min="0" @change="changeNum(item)" :disabled="item.iInvRCost==0"/>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
					<view  class="" style="padding-bottom: 100rpx;">
						<uniLoadMore :status="status" :contentText="contentText" :rows="typeData[current].subData" :width="194"></uniLoadMore>
					</view>
				</scroll-view>
			</view> -->
		</view>
		<view class="tabbar" style="position: fixed;z-index: 999999;">
			<uni-goods-nav style="width: 100%;" :fill="true" :price="price" :options="options"
				:button-group="customButtonGroup1" @click="submitOrderCart" @buttonClick="submitOrderCart" />
		</view>
	</view>
	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		momenyFormat
	} from '@/utils/utils.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			uniLoadMore
		},
		data() {

			return {
				Quantity: "",
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				typeData: [],
				data: [],
				pagination: {
					PageIndex: 1,
					PageRows: 30,
				},
				total: 0,
				queryParam: {
					"Condition": "Name",
					"Keyword": "",
					"CommpayId": "",
				},
				current: 0,
				CompanyId: '',
				options: [{
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				customButtonGroup1: [{
					text: '去赊货',
					backgroundColor: 'linear-gradient(90deg, #38FFCB, #2979FF)',
					color: '#fff'
				}],

				currentDate: "",
				Usedamount: 0,
				entity: {},
				userInfo: {},
				// 选择的账期是一个月，，两个月，  三个月
				TYPE: 0
			}
		},
		computed: {
			inputWid() {
				return function(value) {
					// console.log('获取实时监听输入的饿值', value)
					if (value == '' || value == 0) {
						return '50rpx';
					} else {
						return String(value).length * 17 + 'rpx';
					}
				};
			},
			...mapState(['carList']),
			price() {
				let newSubListData = this.typeData[0].subData
				console.log('打印price111', this.carList, newSubListData)
				// newSubListData.forEach(item=>{
				// 	this.carList.forEach(v=>{
				// 		if(item.Id===v.Id){
				// 			if(v.Quantity>0){
				// 				item.Quantity=v.Quantity
				// 			}else{
				// 				item.Quantity=0
				// 			}

				// 		}
				// 	})
				// })
				let num = 0
				this.carList.forEach(item => num += Number(item.iInvRCost) * item.Quantity)
				return {
					price: num,
					other: this.Usedamount - num
				}
			}
		},
		watch: {
			carList: {
				handler(arr, newArr) {

					arr.forEach((item, index) => {
						if (item.Quantity == 0) {
							arr.splice(index, 1)
						}
					})
					this.options[0].info = arr.length
				},
				deep: true,
				immediate: true
			}
		},
		onShow() {

			this.getDataList()
			// 返回清空更新store购物车数据
			// this.$store.commit('clearCarList')
		},
		onBackPress() {
			// 返回清空更新store购物车数据
			this.$store.commit('clearCarList')
		},
		async onLoad(options) {
			console.log('22222222222222222222222')
			// this.TYPE = Number(options.current)-1

			this.userInfo = uni.getStorageSync('userInfo')
			this.entity = options
			this.TYPE = Number(options.typeIndex)
			this.currentDate = options.current
			this.queryParam.CommpayId = uni.getStorageSync('shopInfo').Id
			await this.getTypeList()
			uni.setNavigationBarTitle({
				title: uni.getStorageSync('shopInfo').Title
			})
			// 获取可用额度
			this.GetQuota()
		},
		created() {
			console.log('1111111111111111111')
		},
		methods: {
			numberBlur(item) {
				console.log(item)
			},
			async reduce(item, index) {
				item.Quantity = Number(item.Quantity) - 1
				if (Number(item.Quantity) < 0) {
					item.Quantity = 0
				}
				let arr = String(item.Quantity).split('.')
				if (arr[1]) {
					if (arr[1].length > 2) {
						let str = `${arr[0]}.${arr[1].substring(0,2)}`
						await setTimeout(async () => {
							await this.$set(item, 'Quantity', Number(str))
						})
						this.updateCarList(item)
						return
					}

				}
				this.updateCarList(item)
			},
			async add(item, index) {
				item.Quantity = Number(item.Quantity) + 1

				if (Number(item.Quantity) > 1000000) {
					this.$api.msg('只能输入到百万')
					await setTimeout(async () => {
						await this.$set(item, 'Quantity', 1000000)
					})
					this.updateCarList(item)
					return
				}
				let arr = String(item.Quantity).split('.')
				if (arr[1]) {
					if (arr[1].length > 2) {
						let str = `${arr[0]}.${arr[1].substring(0,2)}`
						await setTimeout(async () => {
							await this.$set(item, 'Quantity', Number(str))
						})
						this.updateCarList(item)
						return
					}

				}
				this.updateCarList(item)
			},
			async numberInput(item) {
				console.log(item)
				console.log(item.Quantity.length)
				if (Number(item.Quantity) > 1000000) {
					this.$api.msg('只能输入到百万')
					await setTimeout(async () => {
						await this.$set(item, 'Quantity', 1000000)

					})

					this.updateCarList(item)
					return
				}
				console.log(String(item.Quantity).split('.'))
				let arr = String(item.Quantity).split('.')
				if (arr[1]) {
					if (arr[1].length > 2) {
						console.log(`${arr[0]}.${arr[1].substring(0,2)}`)
						let str = `${arr[0]}.${arr[1].substring(0,2)}`
						this.$api.msg('只能输入两位小数')
						// item.Quantity = Number(str)
						await setTimeout(async () => {
							await this.$set(item, 'Quantity', Number(str))
						})
						this.updateCarList(item)
						return
					}

				}
				this.updateCarList(item)
				// if (item.Quantity.length == 7) {
				// 	// 保存百万级
				// 	this.$api.msg('只能输入到百万')
				// 	// item.number = Number(number)
				// 	return
				// }
				// this.updateCarList(item)
			},
			...mapMutations(['updateCarList']),
			changePrice() {
				let num = 0
				this.carList.forEach(item => num += Number(item.iInvRCost) * item.Quantity)
				return {
					price: num,
					other: this.Usedamount - num
				}
			},
			changeNum(item) {
				console.log(item)
				// item.RemainingAmount= this.price
				this.updateCarList(item)
			},
			// 获取可用额度数据
			GetQuota() {
				this.$http('post', '/Base/Base_Quota/GetQuota?CreatorId=' + this.userInfo.Id + '&Compayid=' + this.entity
					.Id +
					'&CompanyName=' + this.entity.Title + '&BankId=' + this.entity.BankId).then(res => {
					if (res.Success) {
						this.Usedamount = res.Data.Totalamount - res.Data.Usedamount
					} else this.$api.msg(res.Msg)
				})
			},
			lower() {
				this.status = "loading"
				if (this.typeData[this.current].subData.length >= this.typeData[this.current].total) {
					this.status = "noMore"
					return
				}
				this.typeData[this.current].PageIndex++
				uni.showLoading()
				this.$http('post', '/BO/BIlling/GetPeriodPricedata', {
						PageIndex: this.typeData[this.current].PageIndex,
						PageRows: 30,
						Search: {
							"CommpayId": this.typeData[this.current].CompanyId,
							TypeId: this.typeData[this.current].Id,
							// 选择是账期一 账期二  账期三
							Type: this.TYPE
						}
					})
					.then(res => {
						this.status = "noMore"
						uni.hideLoading()
						if (res.Success) {
							res.Data.forEach(item => {
								item.Quantity = ''
								item.iInvRCost = (Math.random() * 10).toFixed(2)
							})
							this.typeData[this.current].subData = this.typeData[this.current].subData.concat(res.Data)
							this.typeData[this.current].total = res.Total

							if (this.typeData[this.current].subData.length >= res.Total) {
								this.status = "noMore"
								return
							}
							console.log(this.typeData, '11111111111111111111111')
						} else {
							this.status = "noMore"
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
			},
			// 查询
			search() {
				if (this.typeData.length <= 0) return uni.showToast({
					icon: 'none',
					title: '请先添加分类'
				})
				this.getDataList(this.typeData[this.current].Id)
			},
			// 左侧点击
			changeType(index, pid) {
				console.log('左侧点击=====================', index, pid)
				this.status = "loading"
				this.current = index
				if (this.typeData[index].subData.length > 0) {
					this.status = "noMore"
					return
				}
				this.getDataList(pid)

			},
			// 分类列表
			async getTypeList() {
				uni.showLoading()
				this.typeData = [{
					Name: '全部',
					Id: '0',
					CompanyId: this.queryParam.CommpayId,
					subData: [],
					PageIndex: 1,
					total: 0
				}]
				await this.$http('post', '/BO/InventType/GetDataList', {
						Search: this.queryParam
					})
					.then(res => {
						uni.hideLoading()
						if (res.Success) {
							this.typeData = this.typeData.concat(res.Data.map(item => {
								return {
									...item,
									subData: [],
									PageIndex: 1,
									total: 0
								}
							}))
							if (this.typeData.length > 0) this.getDataList()
							console.log(this.typeData)
							this.typeData.forEach(item => {
								item.subData.forEach(value => {
									value.Quantity = ''
								})
							})
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					})
			},
			// 商品列表
			getDataList(pid) {
				uni.showLoading()
				this.$http('post', '/BO/BIlling/GetPeriodPricedata', {
						...this.pagination,
						Search: {
							"CommpayId": this.typeData[this.current].CompanyId,
							TypeId: this.typeData[this.current].Id,
							// 选择是账期一 账期二  账期三
							Type: this.TYPE,
							NameorCode: this.queryParam.NameorCode
						}
					})
					.then(res => {
						console.log('获取商品列表', res.Data)
						uni.hideLoading()
						if (res.Success) {
							if (res.Data.length == 0) {
								this.typeData[this.current].subData = []
								this.status = "noMore"
								return
							}
							res.Data.forEach(item => {
								item.Quantity = ''

								if (this.carList.length > 0) {
									this.carList.forEach(v => {
										if (v.Id === item.Id) {
											item.Quantity = v.Quantity
										}
									})
								}
							})

							console.log('获取购物车数据', this.carList)



							this.typeData[this.current].subData = res.Data
							this.typeData[this.current].total = res.Total


							console.log('获取是否还在加载中', this.typeData[this.current].subData, res.Total)
							if (this.typeData[this.current].subData.length >= res.Total) {
								this.status = "noMore"
								return
							}
						} else {
							this.status = "noMore"
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
			},
			// 保存
			submitOrderCart() {
				if (this.carList.length <= 0) return this.$api.msg('请添加商品')
				uni.navigateTo({
					url: '/pages/Settle/Settle?currentDate=' + this.currentDate + '&Usedamount=' + this
						.Usedamount +
						'&Title=' + this.entity.Title + '&BankId=' + this.entity.BankId + '&Id=' + this.entity.Id
				})
			},
			cancel() {
				this.queryParam.NameorCode = ''
				if (this.typeData.length > 0) this.getDataList(this.typeData[this.current].Id)
			},
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-list-item__container[data-v-296a3d7e] {
		padding: 0 !important;
	}

	.sideRightimage image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 15rpx
	}

	.sideRightTitle {
		display: flex;
		flex-direction: column;
	}

	.footerCheck {
		display: flex;
		align-items: center;

		input {
			text-align: center;
			width: 80rpx;
			backzound-color: #F7F7F7;
			margin-right: 10rpx;
			padding: 2rpx 0;
		}

		text {
			width: 50rpx;
			line-height: 50rpx;
			text-align: center;
			display: inline-block;
			background-color: #F7F7F7;
			margin-right: 10rpx;

		}
	}

	.goodsInfo {
		display: flex;
		flex-direction: column;
		height: 100%;

		.container {
			display: flex;
			background-color: #fff;
			// height: calc(100% - 56px - 120rpx);
			height: calc(100% - 120rpx);

			.left {
				position: fixed;
				z-index: 100;
				height: 100%;
				width: 200rpx;
				left: 0;
				background-color: #f5f5f5;
				text-align: center;
				overflow-y: scroll;
				box-sizing: border-box;
				padding-bottom: 30rpx;

				.leftItem {
					line-height: 2.5;
					font-weight: 600;
					color: #999;
					font-size: 15px;
				}

				.active {
					color: #000;
					background-color: #fff;
				}
			}

			.right {
				border: 2px solid blue;
				flex: 1;
				// overflow-y: scroll;
				max-height: 100%;
			}
		}

		.tabbar {
			width: 100%;
			height: 120rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			bottom: 0;
			border-top: 1px solid #E0E0E0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-items: center;

			.submitOrder {
				width: 208rpx;
				height: 80rpx;
				background-image: linear-gradient(to right, #38FFCB, #2979FF);
				border-radius: 60rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2.57rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>